<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
			<view class="portrait-box">
				<image class="portrait" :src="userInfo.portrait || '/static/missing-face.png'"></image>
				<text class="pt-upload-btn yticon icon-paizhao"></text>
			</view>
		</view>
		
		<view class="user-info-section">
		    <form @submit="formSubmit">
		        <!-- 卡片式容器 -->
		        <view class="info-card">
		            <!-- 姓名 -->
		            <view class="info-item">
		                <view class="label-box">
		                    <text class="info-label">名字</text>
		                    <text class="required-mark">*</text>
		                </view>
		                <input class="info-input" 
		                       placeholder-class="input-placeholder"
		                       placeholder="请输入姓名"
		                       v-model="userList.nickname"
		                       :disabled="!isEditMode" />
		            </view>
		
		            <!-- 分割线 -->
		            <view class="divider"></view>
		
		            <!-- 手机号 -->
		            <view class="info-item">
		                <text class="info-label">手机号码</text>
		                <view class="input-group">
		                    <input class="info-input" 
		                           type="number"
		                           placeholder-class="input-placeholder"
		                           placeholder="请输入手机号"
		                           v-model="userList.mobile"
		                           :disabled="!isEditMode" />
		                    <text v-if="!isEditMode" 
		                          class="yticon icon-fuzhi copy-btn" 
		                          @tap="copyText(userList.mobile)"></text>
		                </view>
		            </view>
		
		            <view class="divider"></view>
		
		            <!-- 代理类型 -->
		            <view class="info-item">
		                <text class="info-label">代理类型</text>
		                <picker class="info-picker"
		                        :disabled="!isEditMode"
		                        @change="bindPickerChange"
		                        :value="index" 
		                        :range="agencyOptions">
		                    <view class="picker-content">
		                        {{ userList.userLevel == 0 ? '普通用户' : userList.userLevel == 1 ? 'VIP用户' : '区域代理'}}
		                        <text v-if="isEditMode" class="yticon icon-arrow-down"></text>
		                    </view>
		                </picker>
		            </view>
		
		            <view class="divider"></view>
		
		            <!-- ID号 -->
		            <view class="info-item">
		                <text class="info-label">ID号</text>
		                <text class="info-static">{{ userList.id }}</text>
		            </view>
		
		            <view class="divider"></view>
		
		            <!-- 微信openid -->
		            <view class="info-item">
		                <text class="info-label">微信openid</text>
		                <view class="input-group">
		                    <text class="info-static">{{ formatOpenid(userList.weixinOpenid) }}</text>
		                    <text class="yticon icon-fuzhi copy-btn" 
		                           @tap="copyText(userList.weixinOpenid)"></text>
		                </view>
		            </view>
		        </view>
		
		        <!-- 操作按钮 -->
		        <view class="action-btns" v-if="isEditMode">
		            <button class="btn secondary" @tap="toggleEditMode">取消</button>
		            <button class="btn primary" form-type="submit">保存修改</button>
		        </view>
		        <button class="btn edit-btn" v-else @tap="toggleEditMode">
		            <text class="yticon icon-edit"></text>
		            编辑资料
		        </button>
		    </form>
		</view>
		
	</view>
</template>
<style>
	/* 基础样式 */
	.user-info-section {
	    background: #f8f9fa;
	}
	
	/* 信息卡片 */
	.info-card {
	    background: #ffffff;
	    border-radius: 24rpx;
	    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
	    padding: 0 32rpx;
	}
	
	/* 信息项通用样式 */
	.info-item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    min-height: 104rpx;
	    padding: 20rpx 0;
	}
	
	.label-box {
	    display: flex;
	    align-items: center;
	    width: 200rpx;
	}
	
	.info-label {
	    font-size: 30rpx;
	    color: #666;
	    font-weight: 500;
	}
	
	.required-mark {
	    color: #ff4444;
	    font-size: 28rpx;
	    margin-left: 8rpx;
	}
	
	/* 输入区域 */
	.input-group {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	}
	
	.info-input {
	    flex: 1;
	    text-align: right;
	    font-size: 30rpx;
	    color: #333;
	    padding: 16rpx 0;
	    border-radius: 12rpx;
	    transition: all 0.2s;
	}
	
	.info-input:disabled {
	    background: transparent;
	    opacity: 1;
	    color: #333;
	}
	
	.input-placeholder {
	    color: #cccccc;
	}
	
	/* 选择器样式 */
	.info-picker {
	    flex: 1;
	    text-align: right;
	}
	
	.picker-content {
	    color: #333;
	    font-size: 30rpx;
	    display: flex;
	    align-items: center;
		float: right;
	    gap: 12rpx;
	}
	
	.icon-arrow-down {
	    color: #999;
	    font-size: 28rpx;
	}
	
	/* 不可编辑内容 */
	.info-static {
	    font-size: 30rpx;
	    color: #333;
	    opacity: 0.9;
	}
	
	/* 分割线 */
	.divider {
	    height: 1rpx;
	    background: #f0f0f0;
	    margin: 0 -32rpx;
	}
	
	/* 按钮样式 */
	.action-btns {
	    display: flex;
	    gap: 32rpx;
	    margin-top: 48rpx;
	    padding: 0 32rpx;
	}
	
	.btn {
	    flex: 1;
	    height: 88rpx;
	    border-radius: 16rpx;
	    font-size: 32rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transition: all 0.2s;
	}
	
	.primary {
	    background: linear-gradient(135deg, #007AFF, #0063cc);
	    color: white;
	    box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.3);
	}
	
	.secondary {
	    background: #f8f9fa;
	    color: #666;
	    border: 1rpx solid #e0e0e0;
	}
	
	.edit-btn {
	    width: 240rpx;
	    margin: 48rpx auto 0;
	    background: #ffffff;
	    color: #007AFF;
	    border: 1rpx solid #007AFF;
	}
	
	.icon-edit {
	    margin-right: 12rpx;
	    font-size: 36rpx;
	}
	
	/* 复制按钮 */
	.copy-btn {
	    color: #007AFF;
	    font-size: 36rpx;
	    margin-left: 24rpx;
	    padding: 8rpx;
	}
</style>

<script>
	import {getUserInfo} from '@/config/api/user.js'
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				isEditMode: false,
				userList: {
					// name: '张三',
					// mobile: '18373528627',
					// userLevel: '区域代理',
					// id: '100012160',
					// weixinOpenid: 'oVpFH4-Xlq54CY0kBJle_M1T04K'
				},
				agencyOptions: ['普通用户', 'VIP用户', '区域代理']
			};
		},
		computed:{
			...mapState(['userInfo']),
		},
		mounted() {
		   this.loadUserInfo()
		 },
		methods: {
		    toggleEditMode() {
		        this.isEditMode = !this.isEditMode
		    },
			//获取用户基本信息列表
			async loadUserInfo() {
				  try {
					const userId = this.userInfo.id;
					console.log("userid+"+userId);
					const res = await getUserInfo({userId})
					if (res && res.data && typeof res.data === 'object' && 'code' in res.data && res.data.code === 200) {
						this.userList = res.data.data
						console.log(this.userList);
					} else {
						console.error('请求失败:', res?.data?.msg || '未知错误');
					}
				  } catch (error) {
					console.error('接口异常:', error)
					this.$message.error('数据加载失败')
				  }
				  
			},
		    formSubmit(e) {
		        // 这里执行提交到服务器的操作
		        uni.request({
		            url: '/api/updateUserInfo',
		            method: 'POST',
		            data: this.userList,
		            success: () => {
		                uni.showToast({ title: '保存成功' })
		                this.isEditMode = false
		            }
		        })
		    },
		    bindPickerChange(e) {
		        this.userList.agency = this.agencyOptions[e.detail.value]
		    },
		    formatOpenid(weixinOpenid) {
		        return weixinOpenid ? weixinOpenid.slice(0,6) + '*****' + weixinOpenid.slice(-4) : ''
		    },
		    copyText(content) {
		        uni.setClipboardData({ data: content })
		    }
		},
		
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
	}

</style>
